<template>
  <el-dialog :title="!dataForm.id ? '人员信息新增' : '人员信息修改'" :close-on-click-modal="false" fullscreen :visible.sync="visible" center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="dataForm.gender" placeholder="请选择">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生日期" prop="birthDay">
            <el-date-picker v-model="dataForm.birthDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
				<el-col :span="6">
				  <el-form-item label="民族" prop="nation">
						<el-select v-model="dataForm.nation">
							<el-option v-for="item in nationalList" :value="item.id" :label="item.name" :key="item.id"></el-option>
						</el-select>
				  </el-form-item>
				</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="certificateType">
            <el-select v-model="dataForm.certificateType" placeholder="请选择">
              <el-option label="身份证" :value="1"></el-option>
              <el-option label="护照" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号" prop="certificateNum">
            <el-input v-model="dataForm.certificateNum" placeholder="证件号" :rules="dataForm.certificateType == 1 ? checkCertificateNum : [{required: false}]"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="telPhone">
            <el-input v-model="dataForm.telPhone" placeholder="联系电话" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="父亲姓名" prop="fatherName">
            <el-input v-model="dataForm.personExtProp.fatherName" placeholder="父亲姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="父亲电话" prop="fatherPhone">
            <el-input v-model="dataForm.personExtProp.fatherPhone" placeholder="父亲电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="母亲姓名" prop="motherName">
            <el-input v-model="dataForm.personExtProp.motherName" placeholder="母亲姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="母亲电话" prop="motherPhone">
            <el-input v-model="dataForm.personExtProp.motherPhone" placeholder="母亲电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col  :span="24">
          <el-form-item label="家庭住址" prop="address">
            <region-linkage ref="cityData" @getCityData="getCityData" :provinceCode="province" :cityCode="city" :areaCode="area"></region-linkage>
            <el-input v-model="dataForm.address" placeholder="家庭住址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="出生体重" prop="birthWeight">
            <el-input v-model="dataForm.personExtProp.birthWeight" placeholder="出生体重" > <template slot="append">g</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否早产" prop="premature">
            <el-radio v-model="dataForm.personExtProp.premature"  :label="1">是</el-radio>
            <el-radio v-model="dataForm.personExtProp.premature" :label="0">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="早产周数" prop="preWeek">
            <el-input v-model="dataForm.personExtProp.preWeek" placeholder="早产周数" >
              <template slot="append">周</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="习惯用手" prop="habitHand">
            <el-radio v-model="dataForm.personExtProp.habitHand"  label="Y">右手</el-radio>
            <el-radio v-model="dataForm.personExtProp.habitHand" label="Z">左手</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="父亲近视史" prop="fatherMyopia">
            <el-select v-model="dataForm.personExtProp.fatherMyopia" placeholder="请选择">
              <el-option
                v-for="(item,index) in bizData.myopiaData"
                :label="item.label"
                :value="item.value" :key="index"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="母亲近视史" prop="motherMyopia">
            <el-select v-model="dataForm.personExtProp.motherMyopia" placeholder="请选择">
              <el-option
                v-for="(item,index) in bizData.myopiaData"
                :label="item.label"
                :value="item.value" :key="index"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="书写年龄" prop="writeAge">
            <el-input v-model="dataForm.personExtProp.writeAge" placeholder="书写年龄" >
              <template slot="append">岁</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="dataForm.personExtProp.email" placeholder="邮箱" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="兴趣爱好" prop="interest">
            <el-input v-model="dataForm.personExtProp.interest" placeholder="兴趣爱好" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">关联卡信息</el-divider>
      <el-row>
        <el-button type="info" icon="el-icon-plus" @click="addCard">新增关联卡</el-button>
      </el-row>
      <el-row v-for="(item,personCardIndex) in personCardList"  :key="personCardIndex">
        <el-divider content-position="left">关联卡{{personCardIndex + 1}}</el-divider>
        <el-col :span="4">
          <el-form-item label="关联卡">
            <el-select
              v-model="item.cardType"
              filterable
              allow-create
              default-first-option
              placeholder="关联卡类型">
              <el-option
                v-for="item in bizData.cardTypeData"
                :label="item.label"
                :value="item.value" :key="personCardIndex">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卡号" prop="cardNum">
            <el-input v-model="item.cardNum" placeholder="卡号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
            <el-form-item label="是否正常" prop="status">
              <el-radio v-model="item.status" label="1">是</el-radio>
              <el-radio v-model="item.status" label="0">否</el-radio>
            </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCard(personCardIndex)" style="float: right">删除</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="left">亲友关系</el-divider>
      <el-row>
        <el-button type="info" icon="el-icon-plus" @click="addRelate">新增关系</el-button>
      </el-row>
      <el-row v-for="(item,personRelateIndex) in personRelateList"  :key="personRelateIndex">
        <el-divider content-position="left">关系{{personRelateIndex + 1}}</el-divider>
        <el-col :span="4">
          <el-form-item label="关系">
            <el-select
              v-model="item.relateType" filterable allow-create default-first-option
              placeholder="关系类型">
              <el-option
                v-for="item in relateOptions"
                :label="item.label"
                :value="item.value" :key="personRelateIndex">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="4">
          <el-form-item label="姓名">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="姓别">
            <el-select v-model="item.gender" placeholder="请选择">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="联系电话">
            <el-input v-model="item.mobile"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-button type="danger" icon="el-icon-delete" @click="deleteRelate(personRelateIndex)" style="float: right">删除</el-button>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-prevent-re-click>确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {getPersonObj, addPersonObj, putPersonObj} from '@/api/pvm/person'
    import {getListByParentId} from '@/api/admin/region'
    import { fetchNationalList } from '@/api/admin/national'

		//	省市县三级联动
		import RegionLinkage from '@/components/business/RegionLinkage'


var checkName = (rule, value, callback) => {
    let nameReg = /^(?:[\u4e00-\u9fa5]+)$/
// /^(?:[\u4e00-\u9fa5]+)(?:●[\u4e00-\u9fa5]+)*$|^[a-zA-Z0-9]+\s?[\.·\-()a-zA-Z]*[a-zA-Z]+$/
    if (!nameReg.test(value)) {
      callback(new Error('名字格式不对，请重新输入'))
    } else {
      callback()
    }
  }
  var checkCertificateNum = (rule, value, callback) => {
    let id18 = /^([1-9][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    // let id15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
    if (!id18.test(value) ) {
      callback(new Error('身份证号格式不对，请重新输入'))
    } else {
      callback()
    }
  }
    export default {
    data () {
      return {
        visible: false,
				city: "",
				province: "",
				area: "",
        dataForm: {
            name:'',
            gender:'',
            birthDay:'',
            certificateType:'',
            certificateNum:'',
            telPhone:'',
            address:'',
            personExtProp:{
                birthWeight:'',
                premature:'',
                writeAge:'',
                preWeek:'',
                habitHand:'Y',
                fatherMyopia:'0',
                motherMyopia:'0'
            }
        },
        personRelateList: [],
        personCardList: [],
        nationalList: [],
        dataRule: {
          cardType: [{ required: true, message: '卡类型不能为空', trigger: 'blur' },],
          customerCard: [{ required: true, message: '客户卡号不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
          phone1: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }],
          gender: [{ required: true, message: '客户性别不能为空', trigger: 'blur' }],
          birthDay: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
          certificateNum: [{ required: true, message: '身份证号不能为空', trigger: 'blur' },{
              validator: checkCertificateNum,
              trigger: 'blur'
            }],
        },
          relateOptions: [{
              value: '亲戚',
              label: '亲戚'
          }, {
              value: '母女',
              label: '母女'
          }, {
              value: '父女',
              label: '父女'
          }, {
              value: '父子',
              label: '父子'
          }, {
              value: '夫妻',
              label: '夫妻'
          }, {
              value: '母子',
              label: '母子'
          }, {
              value: '朋友',
              label: '朋友'
          }, {
              value: '同事',
              label: '同事'
          }]
      }
    },
		components:{
			RegionLinkage
		},
    computed: {
        ...mapGetters(['bizData', 'keyCollapse'])
    },
    methods: {
      // 获取民族列表
      getNationalList(){
        fetchNationalList({ current: 1, size: 100 }).then(response => {
          if(response.data.code == '0'){
            this.nationalList = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      init (id) {
        this.dataForm.id = id || ''
        this.dataForm.nation = 1
        this.visible = true
        this.province = ''
        this.city = ''
        this.area = ''
        this.personRelateList = []
        this.personCardList = []
        this.$nextTick(() => {
          this.getNationalList()
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getPersonObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.personRelateList=this.dataForm.personRelateList
                this.personCardList=this.dataForm.personCardList
                this.city = this.dataForm.cityCode * 1;
                this.province = this.dataForm.provinceCode * 1;
                this.area = this.dataForm.areaCode * 1;
                let data = {
                  province: this.province,
                  city: this.city,
                  area: this.area
                }
                this.$refs.cityData.init(data)
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }else{
            let data = {
              province: '',
              city: '',
              area: ''
            }
            this.$refs.cityData.init(data)
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.dataForm.name = this.dataForm.name.trim()
            if(this.personRelateList){
              this.dataForm.personRelateList=this.personRelateList
            }
            if(this.personCardList){
                this.dataForm.personCardList=this.personCardList
            }
            if (this.dataForm.id) {
              putPersonObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
              });
            } else {
              addPersonObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
              })
            }
          }
        })
      },
      //  获取地址数据
      getCityData(data){
        this.dataForm.province = data.provinceRegionName;
        this.dataForm.provinceCode = data.province;
        this.dataForm.city = data.cityRegionName;
        this.dataForm.cityCode = data.city;
        this.dataForm.area = data.areaRegionName;
        this.dataForm.areaCode = data.area;
          // if(data){
          //   this.dataForm.province=data.province
          //   this.dataForm.city=data.city
          //   this.dataForm.area=data.area
          // }
      },
        getMyopiaType: function (value) {
            let obj = {};
            obj = this.bizData.myopiaData.find((item)=>{
                return item.value === value;
            });
            return obj.label;
        },
        //  添加亲友关系
        addRelate() {
          let obj = {
          }
          this.personRelateList.push(obj)
        },
        //  删除亲友关系
        deleteRelate(index){
          this.personRelateList.splice(index,1)
        },
        //  添加人员卡关系
        addCard() {
            let obj = {}
            this.personCardList.push(obj)
        },
        //  删除人员卡关系
        deleteCard(index){
            this.personCardList.splice(index,1)
        }
    }
  }
</script>
